<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>课程材料归档管理系统</title>
  <link rel="stylesheet" href="../plugin/layui-v2.2.5/layui/css/layui.css">
  <style type="text/css">
	.sidebar{background: #333645;width: 200px; position: absolute; left: 0; top: 0; height: 100%; overflow: auto; transition: all 0.2s ease 0s;}
	.main{overflow: hidden; position: absolute; left: 200px; right: 0; height: 100%; transition: all 0.2s ease 0s;}
	.big-page .sidebar{left: -200px;}
	.big-page .main{left: 0;}  
	/**右键菜单*/
	.rightmenu { 
	    position: absolute; 
	    width: 80px; 
	    z-index: 9999;
	    display: none;
	    background-color: #fff;
	    padding: 2px; color: #333;
	    border: 1px solid #eee; 
	    border-radius: 2px; 
	    cursor: pointer; 
	    }
	.rightmenu li { text-align: center; display: block; height: 25px; line-height: 25px; }
	.rightmenu li:hover { background-color: #666; color: #fff; }
  .mask{
    width:100%;
    height:100%;
    position: absolute;
    /*background:;*/
    z-index:999;
    display: none;
  }
  .lf-100{
    left:-100%;
  }
  .lf{
    left:0
  }
  .trsion{
    transition: all 2s;
    -moz-transition: all 2s; /* Firefox 4 */
    -webkit-transition: all 2s; /* Safari 和 Chrome */
    -o-transition: all 2s; /* Opera */
  }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo"><a id="home" href="javascript:;" class="site-demo-active" data-type="tabAdd" name="home" style="color:#F0F8FF">课程材料归档管理系统</a></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
  <ul style="position: relative;top: 50%;transform: translateY(-50%);" class="layui-nav layui-layout-left">
	<button class="layui-btn layui-btn-sm" id="menuBtn">
	  <i class="layui-icon">&#xe647;</i>
	</button>
    </ul> 
    
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="" class="layui-nav-img" id="user_img">
         <label id="teacher_name"></label>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="../logout">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black sidebar trsion" id="leftMenu">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed schoolManager">
          <a class="" href="javascript:;">信息维护</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" class="site-demo-active" data-type="tabAdd" id="academe" name="academe">学院信息维护</a></dd>
            <dd><a href="javascript:;" class="site-demo-active" data-type="tabAdd" id="teacherInfo" name="teacherInfo">教师信息维护</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">课程材料管理</a>
          <dl class="layui-nav-child">
          	<dd><a href="javascript:;" class="site-demo-active academeManager" data-type="tabAdd" id="documentUpload" name="documentUpload">课程材料上传</a></dd> 
          	<dd><a href="javascript:;" class="site-demo-active teacher" data-type="tabAdd" id="documentReceivable" name="documentReceivable">应交课程材料</a></dd>
          	<dd><a href="javascript:;" class="site-demo-active teacher" data-type="tabAdd" id="lookDocument" name="lookDocument">查看往年材料</a></dd>
            <dd><a href="javascript:;" class="site-demo-active academeManager" data-type="tabAdd" id="documentApproval" name="documentApproval">审核课程材料</a></dd>
            <dd><a href="javascript:;" class="site-demo-active academeManager" data-type="tabAdd" id="searchDocumentAcademe" name="searchDocumentAcademe">课程材料查询</a></dd>
            <dd><a href="javascript:;" class="site-demo-active schoolManager" data-type="tabAdd" id="charts" name="charts">课程材料统计</a></dd>
            <!-- <dd><a href="">超链接</a></dd> -->
          </dl>
        </li>
        <li class="layui-nav-item" ><a id="open_personal" href="javascript:;" class="site-demo-active" data-type="tabAdd" name="personal">个人信息维护</a></li>
        <!-- <li class="layui-nav-item"><a href="">待续</a></li> -->
      </ul>
    </div>
  </div>
  
  <div class="layui-body trsion" style="overflow-y: hidden" class="main">
    <!-- 内容主体区域 -->
    <div style="padding: 0px;" >
    	<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
		  <ul class="layui-tab-title">
		  </ul>
		  <ul class="rightmenu">
             <li data-type="closethis">关闭当前</li>
             <li data-type="closeall">关闭所有</li>
          </ul>
          <div class="mask"></div>
		  <div class="layui-tab-content">
		  </div>
		</div>
    </div>
  </div>

  <div class="layui-footer trsion">
    <!-- 底部固定区域 -->
    © 课程材料归档管理系统
  </div>
</div>
<script src="../plugin/layui-v2.2.5/layui/layui.js"></script>
<script src="../plugin/jquery-3.1.1.min.js"></script>
<script src="../js/user.js"></script>
<script>
//JavaScript代码区域


layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块


  //触发事件
  var active = {
    tabAdd: function(){
      if (hasTab(this.text) == -1) {
      	
      }else{
      	//console.log('ss'+this.name);
      	//新增一个Tab项
      	var tabTitle = this.text;
      	if (tabTitle=='课程材料归档管理系统') {
      		tabTitle = '首页'
      	}
	    element.tabAdd('demo', {
	      title: tabTitle//标题
	      ,content: "<iframe src='"+this.name+".html' height='500px' width='100%' frameborder=0 scrolling='auto'></frame>"//内嵌iframe
	      ,id: this.name //用name属性作为id
	    })
      }
      element.tabChange('demo', this.name);
      CustomRightClick(this.name);
    }
    ,tabDelete: function (id) {
        element.tabDelete("demo", id);//删除
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    },
    ininHome : function(){
	  	element.tabAdd('demo', {
		      title: '首页'//标题
		      ,content: "<iframe src='home.html' height='500px' width='100%' frameborder=0></frame>"//内嵌iframe
		      ,id: 'home' //用name属性作为id
		});
  		element.tabChange('demo', 'home');
  	},
  	tabDeleteAll: function (ids) {//删除所有
        $.each(ids, function (i,item) {
            element.tabDelete("demo", item);
        })
    }
  	
  };
  
  //console.log(active.tabAdd);
  //验证tab页是否存在
  var hasTab = function(title){
  	var isExist = 1;
  	$(".layui-tab-title li").each(function(){
  		var newTab = $(this).text().substring(0,$(this).text().length-1);	//截取掉最后一个字符串与传进的标题做比较,存在返回-1
  		if (newTab =='首页') {
  			newTab = '课程材料归档管理系统';
  		}
		if (newTab== title) {
			//console.log($(this).text().substring(0,$(this).text().length-1));
			isExist = -1;
		}
	})
	return isExist;
  };

  $('.site-demo-active').on('click', function(){
    var othis = $(this);
    var type = othis.data('type');
    //console.log(othis.text())
    active[type] ? active[type].call(this, othis) : '';
  });
  //默认加载首页
  active.ininHome();
  
//绑定右键菜单
  function CustomRightClick(id) {
      //取消右键 
      $('.layui-tab-title li').on('contextmenu', function () { return false; })
      $('.layui-tab-title,.layui-tab-title li,.layui-tab-item,.layui-body,.layui-header,.layui-side').click(function () {
          $('.rightmenu').hide();
          $('.mask').hide()
      });
      //桌面点击右击 
      $('.layui-tab-title li').on('contextmenu', function (e) {
    	  //console.log($(this).attr("lay-id"));
          var popupmenu = $(".rightmenu");
          popupmenu.find("li").attr("data-id",$(this).attr("lay-id"));
          // l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
          // t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
          l = e.clientX - $(".layui-side-scroll").width();
          t = e.clientY - $('.layui-tab-title').height()
          popupmenu.css({ left: l, top: t }).show();
          $('.mask').show()
          //alert("右键菜单")
          return false;
      });
  }
  
  //给右键添加功能
  $(".rightmenu li").click(function () {
	  //alert("sss");
	  $('.rightmenu').hide();
      if ($(this).attr("data-type") == "closethis") {
    	  console.log($(this).attr("data-id"));
          active.tabDelete($(this).attr("data-id"))
      } else if ($(this).attr("data-type") == "closeall") {
          var tabtitle = $(".layui-tab-title li");
          var ids = new Array();
          $.each(tabtitle, function (i) {
              ids[i] = $(this).attr("lay-id");
          })

          active.tabDeleteAll(ids);
      }
  })
  
  //默认打开菜单
  // var menuStatus = 'open';
  $("#menuBtn").on("click",function(){
	  // if(menuStatus=='open'){
		//   menuStatus = 'close';
		//   $("#leftMenu").animate({opacity:'0.5',width:'0px'});
	  // }else{
		//   menuStatus = 'open';
		//   $("#leftMenu").animate({opacity:'0.5',width:'300px'});
	  // }
      $('#leftMenu').toggleClass('lf-100')
      $('.layui-body,.layui-footer').toggleClass('lf')
  })
  
});

function openPersonal(){
	$("#open_personal").trigger("click");
}

function approve_detail(){
	$("#documentReceivable").trigger("click");
}

function receive_detail(){
	$("#lookDocument").trigger("click");
}

function getUserMsg(){
	$.ajax({ 
    	url: "/CMA/shiro/getUserMsg",
    	contentType: "application/x-www-form-urlencoded",
    	type:"post",
    	dataType : "json",
    	success: function(data){
    		var role = data.role.role;
    		var user = data.user;
    		$("#teacher_name").text(user.name);
    		$("#user_img").attr('src','../uploadImg/'+user.workid+'.png');
    		//console.log(data.user);
    		showMenu(role);
        }
      });
};

function showMenu(role){
	//console.log("sss"+role);
	if(role == "schoolManager"){
		$(".teacher").hide();
		$(".academeManager").hide();
		$(".schoolManager").show();
	}else if(role == "academeManager"){
		$(".teacher").hide();
		$(".academeManager").show();
		$(".schoolManager").hide();
	}else{
		$(".teacher").show();
		$(".academeManager").hide();
		$(".schoolManager").hide();
	}
}



getUserMsg();
</script>
</body>
</html>